<template>
  <div class="bar-echarts">
    <baseECharts :options="options"></baseECharts>
  </div>
</template>

<script>
import baseECharts from "@/components/baseEChart.vue";
export default {
  components: {
    baseECharts,
  },
  props: {
    barData: {
      type: Object,
      require: true,
    },
  },
  computed: {
    options() {
      var myColor = ["#1089E7","#f57474","#56d0e3","#f8b448","#8b78f6"];
      return {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          top:"10%",
          left: '22%',
          bottom: '10%',
          // containLabel:true
        },
        xAxis: {
          show:false
        },
        yAxis: [
          {
          type: 'category',
          inverse:true,
          data: ['HTML5', 'CSS3', 'javascript', 'VUE', 'NODE'],
          axisLabel: {
            textStyle: {
              color: "rgba(255,255,255,.6)",
              fontSize: "12",
            },
          },
          // y轴线条样式
          axisLine: {
            show:false
          },
          // y轴分割线样式
          axisTick: {
            show:false
          },
          axisLabel:{
            color:"#fff"
          }
        },
        {
          show:true,
          inverse:true,
          data: [702, 350, 610, 793, 664],
          axisLabel: {
            textStyle: {
              color: "#fff",
              fontSize: "12",
            },
          },
          // y轴线条样式
          axisLine: {
            show:false
          },
          // y轴分割线样式
          axisTick: {
            show:false
          },
        }
        ],
        series: [
          {
            name: '条',
            type: 'bar',
            barCategoryGap:50,
            barWidth:10,
            data: [ 70,34,60,78,69],
            yAxisIndex:0,
            itemStyle:{
              barBorderRadius:20,
              color: function(params){
                return myColor[params.dataIndex];
              }
            },
            label:{
              show:true,
              position:"inside",
              formatter:"{c}%"
            }
          },
          {
            name: '框',
            type: 'bar',
            yAxisIndex:1,
            barCategoryGap:50,
            barWidth:15,
            data: [ 100,100,100,100,100],
            itemStyle:{
              barBorderRadius:15,
              color: "none",
              borderColor:"#00c1de",
              borderWidth:3,
            },
          }
        ]
      };
    },
  },
};
</script>

<style lang="scss" scoped>
.bar-echarts{
    width: 100%;
    height: 100%;
}
</style>
